<template xmlns="http://www.w3.org/1999/html">
  <div class="mine-box">
    <el-row>
      <el-col :offset="4" :span="4">

        <el-menu :router="true" class="long-menu">
          <el-menu-item>我的收养</el-menu-item>
          <el-menu-item>收藏记录</el-menu-item>
          <el-menu-item>浏览记录</el-menu-item>
          <el-menu-item>评价</el-menu-item>
        </el-menu>
      </el-col>
      <el-col :span="16">
        <el-row>
          <el-card>
            我的收养
          </el-card>
        </el-row>
        <el-row>
          <el-card>

            <el-row>
              <el-menu :router="true"
                       mode="horizontal"
                       :ellipsis="false">

                <el-menu-item>
                  全部订单
                </el-menu-item>

                <el-menu-item>
                  未完成
                </el-menu-item>

                <el-menu-item>
                  已完成
                </el-menu-item>

              </el-menu>

              <el-space direction="vertical" :size="30">
              <el-card class="bg-card">
                <div class="bill-title">
                  <div class="detail">订单详情</div>
                  <div class="shou-er">收货人</div>
                  <div class="money">金额</div>
                  <div class="operation">操作</div>
                </div>
              </el-card>
                </el-space >

              <el-space direction="vertical" :size="30">
                <el-card class="item-card" v-for="item in 5">

                  <h5 class="bt-card"><span>2002-11-11 11:22</span>
                    <span>订单号：</span><span>Nt01555</span> </h5>
                  <el-divider></el-divider>
                  <div class="bill-item" >
                    <div class="detail">
                      <el-image style="width: 60px; height: 60px" :src="data.url" :fit="fit">

                      </el-image>
                      <div  class="desc">
                        {{data.desc}}
                      </div>

                      <div>
                         x1
                      </div>

                    </div>
                    <div class="shou-er">收货人</div>
                    <div class="money">
                        <span>42.5</span>
                        <hr></hr>
                        <span>在线支付</span>
                    </div>
                    <div class="operation">
                       <div>
                          <el-button type="success">确认收货</el-button>
                       </div>
                      <div>
                        <el-button link>取消</el-button>
                      </div>
                      <div>
                        <el-button link>收货</el-button>
                      </div>
                      <div>
                        <el-button link>确认收货</el-button>
                      </div>
                    </div>
                  </div>
                </el-card>

              </el-space>

            </el-row>

          </el-card>

        </el-row>

      </el-col>

    </el-row>
  </div>
</template>

<script setup lang="ts">


import {reactive} from "vue";

const data=reactive({
   url:'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
   desc:'dsddddssf;alfjlajflkasfkljfaj'
})

</script>

<style scoped>

.mine-box {
  margin-top: 10px;
}

.mine-box .el-card {
  width: 100%;
}

.tag-item {
  margin-right: 15px;
}


.bill-title{
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 100%;
    text-align: center;

}

.bill-item{
  display: flex;
  flex-direction: row;
  width: 100%;
  text-align: center;
  border: 1px solid #efefef;
}



.bg-card{
  background-color: #c0c3ce;
}


.detail{
  display: flex;
  flex-direction: row;
  width: 590px;
  border-right: 1px solid ;


}
.bill-item .detail{
   display: flex;
   flex-direction: row;
   width: 590px;
   height: 100px;
   border-right: 1px solid #efefef;
   padding-top: 10px;



}

.shou-er{
  width: 180px;
  border-right: 1px solid #efefef;
}


.money{
  width: 120px;
  border-right: 1px solid #efefef;
}

.operation{
  width: 180px;
  border-right: 1px solid ;
}

.item-card{
    width: 100%;
    display: flex;
    flex-direction: row;
}


.el-divider{
   margin: 10px;
}



.desc{
  width:240px;
  text-align: left;
  padding-left: 10px;
  overflow:hidden;
}

.mine-box{
   background-color: #f5f5f5;
}

hr{
   width: 60%;
}

.long-menu{
   height: 900px;
   overflow: hidden;
}
</style>